<template>
  <div class="cus">
    <div class="cus_box">
      <div class="title">
        <span>选择上级菜单</span
        ><i @click="$emit('parent_meun_call')" class="el-icon-close"></i>
      </div>
      <div class="content">
        <div style="max-height: 400px;overflow-y: scroll;">
          <el-tree
            :data="data"
            :props="defaultProps"
            @node-click="handleNodeClick"
          ></el-tree>
        </div>
        <div class="btns">
          <el-button @click="$emit('parent_meun_call')">Cancel</el-button>
          <el-button @click="parent_meun_call" type="primary"
            >Confirm</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "parent_meun",
  data() {
    return {
      resut: {},
      data: [],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  props: ["res"],
  mounted() {
    this.getData();
  },
  methods: {
    async getData() {
      var res = await this.apis.sys_menu_select();
      var list = res.data || [];
      var children = [];
      list.map(res => {
        if (res.type == 0 && res.useType == this.res.userType) {
          res.children = [];
          list.map(res2 => {
            if (res.menuId == res2.parentId && res2.type == 1) {
              res.children.push(res2);
            }
          });
          children.push(res);
        }
      });

      children.sort(function(a, b) {
        return a.menuId - b.menuId;
      });

      var data = [
        {
          name: "一级菜单",
          menuId: "999999",
          children: children
        }
      ];
      this.data = data;
      // console.log(this.data);
    },
    handleNodeClick(data) {
      this.resut = data;
    },
    parent_meun_call() {
      this.$emit("parent_meun_call", this.resut);
    }
  }
};
</script>

<style scoped>
.cus_box {
  width: 300px;
}
</style>
